<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="pure-2.0.3/src/tables/css/tables.css"/>
		<link rel="stylesheet" type="text/css" href="pure-2.0.3/src/buttons/css/buttons.css"/>
		<link rel="stylesheet" type="text/css" href="pure-2.0.3/src/forms/css/forms.css"/>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul li{
			list-style: none;
			display: inline-block;
			height: 25px;
			line-height: 25px;
			border: #E0E0E0 solid 1px;
			padding: 0 10px;
			cursor: pointer;
			margin: 0 4px;
			border-radius: 5px;
		}
		.active{
			background: #BBDCFD;
			color: #FFFFFF;
		}
		.pure-button{
			margin: 2px 5px;
		}
		.addItem{
			width: 400px;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 7px #333333;
			position: absolute;
			margin: 0 auto;
			left: 0;
			right: 0;
			top: -513px;
			transition: all .7s; 
		}
		.addItem_sub{
			padding: 27px;
		}
		.addItem_sub input{
			width: 100%;
		}
		.cancel{
			margin-left: 94px;
			margin-top: 24px;
		}
		.title{
			width: 1300px;
			height: 175px;
			margin: 15px auto;
			border: #C1C1C1 solid 1px;
			box-sizing: border-box;
		}
		.title_sub{
			/* padding: 10px; */
		}
		.title_header{
			background-image: linear-gradient(to top, #C1C1C1,#E7EAED);
			font-size: 14px;
			padding: 10px 8px;
		}
		.biaoGe{
			margin: 0 auto;
			width: 1300px;
		}
		.fenYe{
			width: 1300px;
			margin: 0 auto;
			overflow: hidden;
		}
		.fenYe_left{
			float: left;
		}
		.fenYe_right{
			float: right;
			margin-top: 6px;
		}
		.anNiu{
			width: 1310px;
			margin: 0 auto;
		}
		.biaoDan{
			overflow: hidden;
			margin-top: 40px;
		}
		.one, .two, .one_sub, .two_sub{
			float: left;
		}
		.one{
			margin-left: 241px;
		}
		.two{
			margin-left: 140px;
		}
		.chaXun{
			margin-left: 62px;
			margin-top: -1px;
		}
		.fenYe_biaodan{
			width: 300px;
			overflow: hidden;
		}
		.state, .fenYe_text{
			float: left;
		}
		.fenYe_text{
			margin-top: 7px;
		}
		.cover{
			width: 98.8vw;
			height: 98vh;
			position: absolute;
			background: rgba(0,0,0,0.5);
			display: none;
		}
	</style>
	<body>
		<div id="app">
			<div class="cover" ref='cover'></div>
			<div class="title">
				<div class="title_sub">
					<div class="title_header">查询条件</div>
					<form class="pure-form pure-form-stacked biaoDan">
						 <div class="pure-u-1 pure-u-md-1-3 one">
							<label for="last-name" class="one_sub">物品名称：</label>
							<input id="last-name" class="pure-u-23-24" type="text" v-model="queryName">
						</div>
						<div class="pure-u-1 pure-u-md-1-3 two">
							<label for="state" class="two_sub">库存状态：</label>
							<select id="state" class="pure-input-1-2" v-model="queryState">
								<option value=""></option>
								<option value="充足">充足</option>
								<option value="待补货">待补货</option>
							</select>
						</div>
						<button class="pure-button pure-button-primary chaXun" type="button" @click="queryItem">查询</button>
					</form>
					
				</div>
			</div>
			<div class="anNiu">
				<button class="pure-button" @click="addItem">添加</button>
				<button class="pure-button" @click="modifyItem">修改</button>
				<button class="pure-button" @click="deleteItem">删除</button>
			</div>
			<table class="pure-table pure-table-bordered biaoGe">
				<thead>
					<tr>
						<th><input type="checkbox" v-model="ackAll" @change="changeAll" /></th>
						<th>物品ID</th>
						<th>物品名称</th>
						<th>单价</th>
						<th>单位</th>
						<th>数量</th>
						<th>库存状态</th>
						<th>库存预测</th>
						<th>创建时间</th>
						<th>修改时间</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="item in list" :key='item.item_id'>
						<td><input type="checkbox"
									:value="item.item_id"
									 v-model="arr"
									 @change="changeOne"/></td>
						<td>{{ item.item_id }}</td>
						<td>{{ item.item_name }}</td>
						<td>{{ item.item_price }}</td>
						<td>{{ item.item_format }}</td>
						<td>{{ item.item_total }}</td>
						<td>{{ item.item_state }}</td>
						<td>{{ item.item_inventory }}</td>
						<td>{{ item.create_time }}</td>
						<td>{{ item.update_time }}</td>
					</tr>
				</tbody>
			</table>
			<div class="fenYe">
				<div class="fenYe_left">
					<form class="pure-form pure-form-stacked fenYe_biaodan">
					<div class="fenYe_text">总共{{ total }}条数据，显示</div>
					<select id="state" v-model="size" @change="changeSize">
						<option value="5">5条</option>
						<option value="10">10条</option>
						<option value="15">15条</option>
					</select>
					</form>
				</div>
				<div class="fenYe_right">
					<ul>
						<li @click="changeCurr(curr == 1? 1 : curr - 1)">上一页</li>
						<li v-for="item in pagenum"
							@click="changeCurr(item)"
							:class="{ active: item == curr ? true : false }">{{ item }}</li>
						<li @click="changeCurr(curr == pagenum ? pagenum : curr + 1)">下一页</li>
					</ul>
				</div>
			</div>
			<div class="addItem" ref='add'>
				<div class="addItem_sub">
					<form class="pure-form pure-form-stacked">
						<fieldset>
							<legend>添加信息：</legend>
					
							<div class="pure-g">
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="first-name">物品名称：</label>
									<input id="first-name" class="pure-u-23-24" type="text" v-model="add_name">
								</div>
					
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="last-name">单价（元）：</label>
									<input id="last-name" class="pure-u-23-24" type="text" v-model="add_price">
								</div>
					
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="last-name">单位:</label>
									<input id="last-name" class="pure-u-23-24" type="text" v-model="add_format">
								</div>
					
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="city">数量：</label>
									<input id="city" class="pure-u-23-24" type="text" v-model="add_total">
								</div>
								
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="city">库存预测;</label>
									<input id="city" class="pure-u-23-24" type="text" v-model="add_inventory">
								</div>
							</div>
							<button type="button" class="pure-button pure-button-primary cancel" @click="cancelBtn">取消</button>
							<button type="button" class="pure-button pure-button-primary" @click="submit">提交</button>
						</fieldset>
					</form>
				</div>
			</div>
			<div class="addItem" ref='modify'>
				<div class="addItem_sub">
					<form class="pure-form pure-form-stacked">
						<fieldset>
							<legend>修改信息：</legend>
					
							<div class="pure-g">
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="first-name">物品名称：</label>
									<input id="first-name" class="pure-u-23-24" type="text" v-model="modify_name">
								</div>
					
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="last-name">单价（元）：</label>
									<input id="last-name" class="pure-u-23-24" type="text" v-model="modify_price">
								</div>
					
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="last-name">单位:</label>
									<input id="last-name" class="pure-u-23-24" type="text" v-model="modify_format">
								</div>
					
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="city">数量：</label>
									<input id="city" class="pure-u-23-24" type="text" v-model="modify_total">
								</div>
								
								<div class="pure-u-1 pure-u-md-1-3">
									<label for="city">库存预测;</label>
									<input id="city" class="pure-u-23-24" type="text" v-model="modify_inventory">
								</div>
							</div>
							<button type="button" class="pure-button pure-button-primary cancel" @click="cancelBtn2">取消</button>
							<button type="button" class="pure-button pure-button-primary" @click="submit2">提交</button>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
		<script src="index.js"></script>
	</body>
</html>

